<template>
	<div class="relatedinformations">
		<header class="one-px-border-bottom">
			<div class="title">相关资讯</div>
			<router-link to="" class="goto-all">
				全部
				<img src="../assets/img/arrow-right-black.png" alt="" class="img">
			</router-link>
		</header>

		<div class="informations">
			<div class="informations one-px-border-bottom" v-for="item in newsList" :key="item.id">
				<router-link to="">
					<div class="top">
						<img :src="item.previewImages[0].url" class="img">
						<span class="title">{{item.title}}</span>
					</div>
					<div class="bottom">
						<div>
							<span class="author">{{item.source}}</span>
						</div>
					</div>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			newsList: [Object, Array]
		},
		data() {
			return {

			}
		}
	}
</script>

<style scoped lang="less">
	.relatedinformations {
		margin-top: 12px;
		background-color: #fff;
		overflow: hidden;

		header {
			height: 45px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 15px;

			.title {
				font-size: 15px;
				color: #333;
			}

			.goto-all {
				font-size: 13px;
				color: #666;
				height: 100%;
				width: 42px;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				img {
					width: 6px;
					height: 11px;
					margin-left: 4px;
				}
			}

		}

		.informations {
			padding: 0 15px;

			.informations {
				padding: 15px 0;

				.top {
					overflow: hidden;

					img {
						width: 110px;
						height: 78px;
						border-radius: 2px;
						float: right;
						background: none;
					}

					.title {
						font-size: 17px;
						color: #333;
						line-height: 24px;
						margin-right: 115px;
						display: block;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						text-overflow: ellipsis;
						word-wrap: break-word;
						word-break: break-all;
						overflow: hidden;
					}
				}

				.bottom {
					margin-top: 8px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 12px;
					color: #999;

					.author {}
				}
			}
		}
	}

	.one-px-border-bottom {
		position: relative;
		border-bottom: none;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			background: #e8e8e8;
			width: 100%;
			height: 1px;
			transform: scaleY(.5);
			transform-origin: 0 0;
		}
	}

	a {
		color: inherit;
	}

	.img {
		border: 0;
		display: inline-block;
		background: #f5f5f5 url(../assets/img/下载.png) no-repeat 50%;
		background-size: 50%;
	}
</style>
